<template>
  <div>
    <el-table
      :data="currentList"
      v-loading="!showTable"
      :element-loading-svg="svg"
      class="custom-loading-svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-table-column prop="name" label="督导姓名" />

      <el-table-column prop="bind" label="绑定关系">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.bind"
            class="ml-2"
            @change="changeBind(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from "vue";
import vPagination from "../../../utils/pagination.vue";
import {
  login,
  getInfo,
  getRecord,
  getDetail,
  getExportSingle,
  getCounsellorList,
  searchBind,
  addBind,
  addBind_IM,
  deleteBind,
} from "@/service/api";
import {
  loginData,
  user,
  recordSearch,
  recordData,
  userList,
  bindSearch,
} from "@/interface/type";
import exp from "constants";
import { el } from "element-plus/lib/locale";
import { ElMessage } from "element-plus";
import router from "@/router";
const currentList = reactive([
  {
    name: "",
    bind: false,
    supervisorID: 0,
    id: 0,
  },
]); // 当前所有督导列表
let addOption: bindSearch = {
  counsellorID: "",
  supervisorID: "",
};
const option: userList = {
  page: 0,
  size: 1000,
  role: 2,
  name: "",
};
let curList: any[]; //当前账户绑定关系
let showTable = ref(false);
getInfo().then((res) => {
  addOption.counsellorID = res.data.result.counsellorID;
  searchBind({ counsellorID: addOption.counsellorID }).then((val) => {
    curList = val.data.result;
    getCounsellorList(option).then((res) => {
      const rs: any[] = Array.from(res.data.result.counsellorList);
      currentList.length = 0;
      let num = false;
      curList = Array.from(curList);
      rs.forEach((item) => {
        //每个督导是否绑定到此账户
        let bindId = 0;
        const index = curList.findIndex((e) => e.name == item.name);
        if (index != -1) {
          //绑定
          bindId = curList[index].bindingID;
          num = true;
        } else {
          //未绑定
          num = false;
        }
        currentList.push({
          name: item.name,
          supervisorID: item.counsellorID,
          bind: num,
          id: bindId,
        });
      });
      console.log("currentList", currentList, rs);
      showTable.value = true;
    });
  });
});

const transfer = (item: boolean) => {
  if (item === true) {
    return 1;
  } else {
    return 0;
  }
};

const changeBind = (item: any) => {
  if(item.bind == true) {
    addBind({supervisorID: item.supervisorID,counsellorID: addOption.counsellorID });
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
  } else {
    deleteBind({bindingID: item.id});
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }
  location.reload()
}
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`;
</script>

<style scoped lang="less">
::v-deep .el-table .cell {
  text-align: center;
}
</style>
